<template>
<div>
  <div id="app">
    <!-- <img src="./assets/logo.png" width="120" height="120"> -->
    <div class="todos">
      <span class="title">Todos</span>
    </div>
    <div class="todo-main">
      <!-- input a todo item -->
      <div class="todo-head">
        <input class="todo-input" v-model="newTodoValue" autofocus auto-complete="off" placeholder="请输入内容(Enter完成输入)" @keyup.enter="addTodoItem"></el-input>
      </div>
      <!-- display todo items -->
      <el-card class="todo-body">
        <div slot="header">
          <el-button style="float: left; margin-top: -8px;" size="medium" @click="handleClearCompleted">清除已完成</el-button>
          <span style="font-size: 2.2em;" class="title">Todos List</span>
          <el-select @change="handleSelectCategories" class="filter" v-model="currentFilterValue" placeholder="请选择">
            <el-option 
            v-for="(item, index) in filterList" 
            :key="index"
            :label="item.value"
            :value="item.state">
            </el-option>
          </el-select>
        </div>
        <div>
          <div v-for="(item, index) in todoDislayList" :key="index">
              <el-checkbox class="todo-item" @change="handleTaskCompleted" style="margin: 5px;" v-model="item.isCompleted" :label="item.content" border></el-checkbox>
              <span style="color: #409eff; margin-left: 10px;">{{ item.timeStamp }}</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</div>
</template>

<script>
const filterList = [{
  state: '0',
  value: '全部'
}, {
  state: '1',
  value: '已完成'
}, {
  state: '2',
  value: '未完成'
}]
export default {
  data() {
    return {
      /** 
      * todoItem:
      * id,
      * content,
      * timeStamp
      */
      // 存储在localstorage
      todos: {
        todoItemList: [],
        lastID: ''
      },
      todoDislayList: [],
      // 操作变量
      todoItemList: [],
      lastID: '',
      filterList,
      currentFilterValue: filterList[0].state,
      newTodoValue: ''
    }
  },
  mounted() {
    // fetchdata from localstorage
    this.fetchData()
    console.log('【mounted】')
  },
  watch: {
    todoItemList() {
      // update
      console.log('【todoitemlist】 更改')
      this.todo_SAVE()
    }
  },
  methods: {
    // fetch
    fetchData() {
      var lsg = localStorage.getItem('todos')
      if (lsg) {
        var obj = JSON.parse(lsg)
        this.todoItemList = obj.todoItemList
        this.lastID = obj.lastID
      } else {
        this.todoItemList  = []
        this.lastID = 0
      }
      this.handleSelectCategories()
    },
    /** 清楚已完成的todoItem */
    handleClearCompleted() {
      var result = []
      var old_length = this.todoItemList.length
      this.$confirm('Emmmm, 你要擦去曾经的痕迹吗？', 'Todos', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        // 空的
        if (!this.todoItemList.length) {
          this.$message.info('什么都没干, 你还想清除, 你他喵的想干嘛, 滚去干活！')
          return
        }

        // success
        this.todoItemList.forEach(element => {
          if (!element.isCompleted) {
            result.push(element)
          }
        })
        this.todoItemList = result
        this.handleSelectCategories()
        this.todo_SAVE()
        // 已经有todo但是没有完成却进行删除，bug-18-2-19 与家中睡醒后
        if (this.todoItemList.length === old_length) {
          this.$message.info('哦，我亲爱的上帝，你是不是该干点什么，我的天哪！')
        } else {
          this.$message.success("清除完成")
        }
      }).catch(() => {
        // failed
        this.$message.info('Yeah, 清除失败')
      })
    },
    /** 任务打对勾检测 */
    handleTaskCompleted() {
      this.handleSelectCategories()
      // 存储任务状态
      this.todo_SAVE()
    },
    /** select状态检测 */
    handleSelectCategories() {
      var id = parseInt(this.currentFilterValue)
      this.filter(id)
    },
    /** filter */
    filter(id) {
      console.log('【filter】', id)
      this.todoDislayList = []
      // 全部
      if (id === 0) {
        this.todoDislayList = this.todoItemList
      }
      // 已完成
      if (id === 1) {
        this.todoItemList.forEach(e => {
          if (e.isCompleted) {
            this.todoDislayList.push(e)
          }
        })
      }
      // 正在完成
      if (id === 2) {
        this.todoItemList.forEach(e => {
          if (!e.isCompleted) {
            this.todoDislayList.push(e)
          }
        })
      }
      console.log('【filter done】', this.todoDislayList)
    },
    /** add */
    addTodoItem() {
      if (this.newTodoValue) {        
      this.$notify.success({
        title: 'Todos',
        message: this.newTodoValue,
        showClose: 'true'
      })
      } else {
        this.$notify.warning({
          title: "Todos",
          message: "你输空值，你想干什么！！！f*******k",
          showClose: 'false'
        })
        return
      }
    this.todoOP_ADD(this.newTodoValue)
    },
    /**
    * todoOP
    */
    todoOP_ADD(content) {
      // localstorage 存储
      var item = {}
      item.id = parseInt(this.lastID) + 1
      item.content = content
      const d = new Date()
      item.timeStamp = d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate()
      item.isCompleted = false
      console.log('【id】', item)
      // push
      this.todoItemList.push(item)
      this.lastID = item.id
      // clear input
      this.newTodoValue = ''
      this.handleSelectCategories()
    },
    todo_SAVE() {
      this.todos = {}
      this.todos.todoItemList = this.todoItemList
      this.todos.lastID = this.lastID
      localStorage.setItem('todos', JSON.stringify(this.todos))
    }
  }
}
</script>

<style>
.todos {
  /* background-image: url('./assets/s2b.jpg'); */
  background-size: cover;
}
#app {
  font-family: Helvetica, sans-serif;
  text-align: center;
  margin-top: 40px;
  width: 40%;
  position: absolute;
  left: 30%;
  margin-bottom: 50px;
}
.title {
  margin-top: 5px;
  font-family: fantasy;
  font-size: 14.2em;
}
.todo-item {
  font-family: fantasy;
}
.todo-input {
  width: 500px;
  height: 40px;
  padding: 5px;
  border: 2px dotted skyblue;
  border-width: 2px;
  box-shadow: 0 0 20px 5px grey;    
  font-size: 2.0em;
  font-family: fantasy;
}
.todo-head {
  margin-top: 20px;
}
.todo-body {
  margin-top: 20px;
  box-shadow: 0 0 120px 5px grey;
  min-height: 200px;
}
.filter {
  float: right;
  width: 115px;
  margin-top: -13px;
}
</style>
